<html>
<head>
<title>the title</title>
   <script type="text/javascript" 
   src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.getJSON('result.json', function(jd) {
             $('#stage').html('<p> Name: ' + jd.name + '</p>');
             $('#stage').append('<p>Age : ' + jd.age+ '</p>');
             $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
             
             $.each(jd.ville,function(val){
            	 $('#stage').append('<p> Name: ' + val + '</p>');
             })
             
          });
      });
   });
   </script>
   <style type="text/css">
   
   
   
   </style>
</head>
<body>
   <p>Click on the button to load result.json file:</p>
   <div id="stage" style="background-color:blue;">
          STAGE
   </div>
   <input type="button" id="driver" value="Load Data" />
   
   <input type="text" id="searchText" value="" />
   <div id="results">   
   </div>
   
</body>
</html>